.popular-location{
    .single-location{
        position: relative;
        .location-img{
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            z-index: 0;
            &::before{
              position: absolute;
              width: 100%;
              height: 50%;
              bottom: 0;
              content: "";
              @extend %gallery;
              z-index: 1;
            }
            img{
                width: 100%;
                transform: scale(1);
                transition: all .5s ease-out 0s;
            }
        }
        .location-details{
            position: absolute;
            // bottom: 36px;
            left: 45px;
            bottom: -9px;
            @include transition (.4s);
            p{
                color: #fff;
                font-size: 30px;
                font-weight: 700;
            }
            .location-btn{
                padding: 10px 20px;
                background: #fff;
                color: #ff3d1c;
                border-radius: 30px;
                // @include transition (.6s);
                // position: relative;
                // top: 33%;
                opacity: 0;
                visibility: hidden;
                &:hover{
                    background: $theme-color;
                    color: #fff;
                } 
                i{
                    font-size: 10px;
                    padding: 0;
                    margin: 0;
                    position: relative;
                    left: -3px;
                }
            }
        }
    }
}
// Hover
.single-location:hover{
    .location-img{
        img{
            transform: scale(1.1);
        }
    }
    .location-details{
        bottom: 36px;
        .location-btn{
            opacity: 1;
            visibility: visible;
        }
    }
}